<script type="text/javascript" src="../js/vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"
        xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<script type="text/javascript" src="../js/vue-resource.js"></script>
<script type="text/x-template" id="department-template">
    <li>
        <span style="cursor: pointer;"
                :class="{bold: isFolder}"
                @click="toggle"
                @dblclick="changeType"
                @mouseover="mouseover"
                @mouseout="mouseout">
            {{model.name}}
            <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
        </span>
        <ul v-show="open" v-if="isFolder">
            <department
                    v-for="model in model.subDepartmentList"
                    :model="model">
            </department>
            <!--<li class="add" @click="addChild">+</li>-->
        </ul>
    </li>
</script>

<div class="col-md-4">
    <div class="panel panel-default" style="width:100%">
        <div class="panel-heading">
            <h3 class="panel-title">
                <ul  class="nav nav-tabs">
                    <li class="active">
                        <a href="#ems4j_department" data-toggle="tab">组织结构</a>
                    </li>
                    <li>
                        <a href="#ems4j_role" data-toggle="tab">角色</a>
                    </li>
                </ul>
            </h3>
        </div>
        <div   class="tab-content panel-body">
            <div class="tab-pane fade in active tree well ul" id="ems4j_department">
                <department :model="departmentList"></department>
            </div>
            <div class="tab-pane fade in tree well ul" id="ems4j_role">
                <li style="cursor: pointer;"
                    @click="getEmployees"
                    @mouseover="mouseover"
                    @mouseout="mouseout"
                    v-for="role in roleList">
                    <span>
                        {{role.rolename}}
                    </span>
                </li>
            </div>
            <!--<div class="context-menu" id="departmentMenu">-->
                <!--<ul class="dropdown-menu" role="menu">-->
                    <!--<li rel="reload">刷新标签页</li>-->
                    <!--<li rel="closeCurrent">关闭标签页</li>-->
                    <!--<li rel="closeOther">关闭其他标签页</li>-->
                    <!--<li rel="closeAll">关闭全部标签页</li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>

        <!--<div class="panel-body">-->
            <!--<div class="tree well ul" id="ems4j_department" data-toggle="context" data-target="#departmentMenu">-->
                <!--<item-->
                        <!--class="item"-->
                        <!--:model="departmentList">-->
                <!--</item>-->
            <!--</div>-->
        <!--</div>-->
    </div>
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"
                aria-hidden="true">
            &times;
        </button>
        信息提示：添加部门，双击上级部门名字即可。
    </div>
</div>
<div class="col-md-8">
    <div class="panel panel-default">
        <div class="panel-heading" id="departmentTitle">
            <h2 class="panel-title" >{{name}} / <button class="btn btn-primary btn-sm" v-bind:depId="id"  @click="edit">编辑</button></h2>
        </div>
        <div class="panel-body">


            <table class="table table-bordered table-hover">
                <!--搜索条件-->
                <form class="form-horizontal" role="form">
                    <div class="form-group form-group-sm col-sm-2">
                        <label class="  control-label sr-only">姓名:</label>
                        <div class="col-sm-13">
                            <input class="form-control" id="param_name" type="text" placeholder="姓名"/>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-2">
                        <label class="col-sm-4 control-label sr-only">手机：</label>
                        <div class="col-sm-13">
                            <input class="form-control" id="param_mobile" type="text" placeholder="手机"/>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-2">
                        <label class="col-sm-4 control-label sr-only">邮箱：</label>
                        <div class="col-sm-13">
                            <input class="form-control" id="param_email" type="text" placeholder="邮箱"/>
                        </div>
                    </div>
                    <div class="form-group form-group-sm col-sm-2">
                        <div class="col-sm-8">
                            <select id="param_status" class="form-control input-sm" placeholder="状态">
                                <option>&nbsp;</option>
                                <option>在职</option>
                                <option>离职</option>
                                <option>休假</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <button class="btn btn-primary" id="searchByParam">搜索</button>
                        <button class="btn btn-primary" data-toggle="modal" data-target="#editEmployee">修改</button>
                        <button class="btn btn-primary" data-toggle="modal" data-target="#delEmployee">删除</button>
                        <button class="btn btn-primary" data-toggle="modal" data-target="#addEmployee" >添加</button>
                    </div>
                </form>

                <!--表格头-->
                <thead>
                    <tr>
                        <th></th>
                        <th>姓名</th>
                        <th>身份证号</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <!--表格体-->
                <tbody id="table_employee_list">

                    <tr v-for="(emp,index) in employee_list" :class="index%2==0 ? 'active':'info'">
                        <td><input type="checkbox" /></td>
                        <td>{{emp.name}}</td>
                        <td>{{emp.idcardno}}</td>
                        <td>{{emp.mobile}}</td>
                        <td>{{emp.email}}</td>
                        <td v-if="emp.empstatus == 1">在职</td>
                        <td v-if="emp.empstatus == 2">休假</td>
                        <td v-if="emp.empstatus == 3">离职</td>
                    </tr>

                </tbody>
            </table>
            <!--<ul class="pagination">-->
                <!--<li><a href="#">&laquo;</a></li>-->
                <!--<li><a href="#">1</a></li>-->
                <!--<li><a href="#">2</a></li>-->
                <!--<li><a href="#">3</a></li>-->
                <!--<li><a href="#">4</a></li>-->
                <!--<li><a href="#">5</a></li>-->
                <!--<li><a href="#">&raquo;</a></li>-->
            <!--</ul>-->


        </div>
    </div>
</div>

<!--添加员工弹框-->
<div class="modal fade" id="addEmployee">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">身份证号</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="身份证号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-9">
                            <input  class="form-control" value="123456" placeholder="Password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer modal-primary">
                <button type="button" class="btn btn-default"   data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" >确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!--添加部门弹框-->
<div class="modal fade" id="addDepartment">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加部门</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门名称</label>
                        <div class="col-sm-9">
                            <input  id="new_department_name" class="form-control"  placeholder="部门名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门类型</label>
                        <div class="col-sm-9">
                            <input  id="new_department_deptype" class="form-control" value="1" disabled placeholder="部门类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门排序</label>
                        <div class="col-sm-9">
                            <input  id="new_department_ordernum" class="form-control"  placeholder="部门排序">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer modal-primary">
                <button type="button" class="btn btn-default"   data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="new_department_btn">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!--编辑部门弹框-->
<div class="modal fade" id="editDepartment">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑部门</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门名称</label>
                        <div class="col-sm-9">
                            <input  class="form-control" v-model="name"  placeholder="部门名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">上级部门</label>
                        <div class="col-sm-9">
                            <!--@focus="changePid" -->
                            <input  v-model="parentname" class="form-control"  v-bind:pid="parentid" @focus="changePid"  placeholder="上级部门">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门类型</label>
                        <div class="col-sm-9">
                            <input  id="edit_department_deptype" class="form-control" v-model="deptype" disabled placeholder="部门类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">部门排序</label>
                        <div class="col-sm-9">
                            <input  id="edit_department_ordernum" class="form-control" v-model="ordernum" placeholder="部门排序">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer modal-primary">
                <button type="button" class="btn btn-default"   data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"   @click="editDep">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!--修改员工弹框-->
<div class="modal fade" id="editEmployee">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">信息修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">身份证号</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="身份证号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-9">
                            <input   class="form-control"  placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-9">
                            <select>
                                <option>在职</option>
                                <option>离职</option>
                                <option>休假</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-9">
                            <input  class="form-control" value="123456" placeholder="Password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer modal-primary">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="delEmployee">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
    var ems4j_department,ems4j_role,departmentTitle,table_employee_list;

    var editDepartment = new Vue({
        el:'#editDepartment',
        data:{
            'id':'',
            'name':'',
            'parentid':'',
            'parentname':'',
            'ordernum':'',
            'deptype':''
        },
        methods:{
            changePid:function (e) {
                console.log('选上级部门');
                $('#msgContent').html("未开发！");
                $('#msgModal').modal("show");
                setTimeout(function () {
                    $('#msgModal').modal("hide");
                    $('#msgContent').html("");
                },1000);
            },
            editDep:function (e) {
                var temp_id = this.id;
                var temp_name  = this.name;
                var temp_parentid = this.parentid;
                var temp_ordernum = this.ordernum;
                var temp_deptype = this.deptype;
                console.log(temp_id);
                console.log(temp_name);
                console.log(temp_parentid);
                console.log(temp_ordernum);
                console.log(temp_deptype);
                Vue.http.post('/ems4j/dep/editDepartmentInfo',{},{
                    params:{
                        'id':temp_id,
                        'name':temp_name,
                        'parentid':temp_parentid,
                        'ordernum':temp_ordernum,
                        'deptype':temp_deptype
                    }
                }).then(function (response) {
                    /*刷新部门title*/
                    Vue.set(departmentTitle,'id',temp_id);
                    Vue.set(departmentTitle,'name',temp_name);

                    /*刷新部门树*/
                    Vue.http.get('/ems4j/dep/getDepartmentStructure',{}).then(function (result) {
                        Vue.set(ems4j_department,'departmentList',result.body);
                    },function () {});


                    $('#msgContent').html("修改成功！");
                    $('#msgModal').modal("show");
                    setTimeout(function () {
                        $('#msgModal').modal("hide");
                        $('#msgContent').html("");
                    },1000);
                },function () {
                    $('#msgContent').html("修改失败！");
                    $('#msgModal').modal("show");
                    setTimeout(function () {
                        $('#msgModal').modal("hide");
                        $('#msgContent').html("");
                    },1000);
                });
                $('#editDepartment').modal('hide');
            }
        }
    });
</script>

<script type="text/javascript">
    $('#loading').show();

    Vue.http.get('/ems4j/dep/getDepartmentStructure',{}).then(function (response) {
        console.log(response.body);
        if (response.body == "nologin"){window.location.href="../index.html";}
        ems4j_department = new Vue({
            el: '#ems4j_department',
            data: {
                departmentList: response.body
            }
        });
//        var titleData = response.body;
        departmentTitle = new Vue({
            el:'#departmentTitle',
            data:{
                'name':response.body.name,
                'id':response.body.id,
                'ordernum':response.body.ordernum,
                'deptype':response.body.deptype
            },
            methods:{
                edit:function (e) {
                    var depId = $(e.currentTarget).attr('depId');
                    console.log("depId:"+depId);
                    Vue.http.get('/ems4j/dep/getDepartmentInfo',{params:{'depId':depId}}).then(function (result) {
                        if (result.body == "nologin"){window.location.href="../index.html";}
                        console.log(result);
                        console.log(result.body);
                        Vue.set(editDepartment,'id',result.body.id);
                        Vue.set(editDepartment,'name',result.body.name);
                        Vue.set(editDepartment,'parentid',result.body.parentDepartment.id);
                        Vue.set(editDepartment,'parentname',result.body.parentDepartment.name);
                        Vue.set(editDepartment,'ordernum',result.body.ordernum);
                        Vue.set(editDepartment,'deptype',result.body.deptype);
                    },function () {

                    });
                    $('#editDepartment').modal('show');
                }
            }
        });

        console.log("部门:"+response.body.id);
        Vue.http.get('/ems4j/employee/getEmployeeListByDepId',{
            params:{
                'depId':response.body.id
            }
        }).then(function (emp_result) {
            console.log("定义对象之前："+emp_result.body);

            table_employee_list = new Vue({
                el:'#table_employee_list',
                data:{
                    'employee_list':emp_result.body
                }
            });
            console.log("定义对象完成");
            $('#loading').hide();
        },function () {
            console.log('部门（id:'+response.body.id+'）员工获取出错');
            $('#loading').hide();
        });
    },function () {
        $('#loading').hide();
    });
    Vue.http.get('/ems4j/role/getRoleList',{}).then(function (response) {
        console.log(response.body);
        if (response.body == "nologin"){window.location.href="../index.html";}
        ems4j_role = new Vue({
            el: '#ems4j_role',
            data: {
                roleList: response.body
            },
            methods:{
                getEmployees:function (e) {
                    console.log(this.model.rolename);
                    console.log(this.model.roleid);
                    $(e.currentTarget).css('color','#3c8dbc');
                    $(e.currentTarget).siblings().css('color','black');
                },
                mouseover:function (e) {
                    e.currentTarget.style.color="#3c8dbc";
                },
                mouseout:function (e) {
                    e.currentTarget.style.color="black";
                }
            }
        })
        $('#loading').hide();
    },function () {
        $('#loading').hide();
    });

</script>
<script type="text/javascript" src="../js/tree.js"></script>
